<!--用户管理-->
<template>
  <div class="h100 padding20">
    <div class="contentTop">
      <el-row>
        <el-col :span="12">
          <el-button class="btnDefault" @click="treeSave">保存</el-button>
        </el-col>
        <el-col :span="12 " class="textRight pr20 textWhite pt10">当前位置：角色应用管理</el-col>
      </el-row>
    </div>
    <div class="content">
      <el-form ref="form" :model="form" label-width="120px" class="noBg mt20">
        <el-form-item label="系统角色 ：">
          <el-select @change="selectChange" v-model="form.js" placeholder="请选择" class="border1">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单权限 ：">
          <div class="treeDiv border1 dialogRight padding10">
            <el-tree
              ref="tree"
              :data="Data"
              show-checkbox
              node-key="id"
              :default-expand-all="true"
              :default-checked-keys="defaultChecked"
              :props="defaultProps"
              @check-change="handleCheckChange"
            ></el-tree>
          </div>
        </el-form-item>
        <el-form-item label="数据权限 ：">
          <div class="treeDiv border1 dialogRight padding10">
            <div style="margin: 15px 0;"></div>
            <!-- <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
            <!-- <div style="margin: 15px 0;"></div> -->
            <el-checkbox-group v-model="checkedCities">
              <el-checkbox v-for="city in cities" :label="city.id" :key="city">{{city.dataName}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "powerInfo",
  data() {
    return {
      roleID: "",
      checkAll: "",
      checkedCities: [],
      defaultChecked: [],
      cities: [],
      Data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      options: [],
      form: {
        js: "",
        treeArr: []
      }
    };
  },
  computed: {},
  mounted() {
    this.onLoadList();
    this.treeList();
    this.muenList();

    // this.mr(this.form.js)
    // this.form.js=this.options[0].value
  },
  methods: {
    //保存
    treeSave() {
      let params = {
        roleID: this.roleID,
        serviceName: localStorage.getItem("serverName"),
        roleMenuPowers: []
      };
      this.defaultChecked.forEach(element => {
        params.roleMenuPowers.push({
          menuID: element,
          roleID: this.roleID,
          serviceName: localStorage.getItem("serverName"),
          status: 1
        });
      });
      this.$axios.post("/role/upsert/menu/power", params).then(res => {
        // this.$message({
        //     type: "success",
        //     message: "菜单权限保存成功!"
        //   });
      });

      //数据权限
      let param = {
        roleID: this.roleID,
        serviceName: localStorage.getItem("serverName"),
        roleDataPowers: []
      };
      this.checkedCities.forEach(element => {
        param.roleDataPowers.push({
          dataID: element,
          roleID: this.roleID,
          serviceName: localStorage.getItem("serverName"),
          status: 1
        });
      });
      this.$axios.post("/role/upsert/data/power", param).then(res => {
        this.$message({
          type: "success",
          message: "权限保存成功!"
        });
      });
    },
    handleCheckAllChange() {
      this.muenList();
    },
    handleCheckChange(data, checked, indeterminate) {
      let res = this.$refs.tree.getCheckedNodes();
      let arr = [];
      res.forEach(item => {
        arr.push(item.id);
      });
      this.defaultChecked = arr;
    },
    //tree菜单查询
    treeList() {
      let params = {
        serviceName: localStorage.getItem("serverName")
      };
      this.$axios.get("/power/qurey/menu/tree", { params }).then(res => {
        res = res.data.menuPowersTree;
        this.Data = [];
        for (let k in res) {
          let id;
          res[k].forEach(element => {
            id = element.groupID;
          });
          this.Data.push({
            id: id,
            label: k,
            children: res[k].map(item => {
              if (item.status == 1) {
                let obj = {
                  label: item.menuName,
                  id: item.menuID,
                  children: []
                };
                return obj;
              }
            })
          });
          // res[k].forEach(i => {
          //   if(i.status==1){
          //     this.defaultChecked.push(i.menuID)
          //   }
          // });
        }
      });
    },
    mr(val) {},
    selectChange(val) {
      this.roleID = val;
      // this.treeList();
      //  this.mr(val)
      let params = {
        roleID: val,
        serviceName: localStorage.getItem("serverName")
      };
      this.$axios.get("/role/query/roleid", { params }).then(res => {
        res = res.data.roleModel;
        this.defaultChecked = [];
        this.checkedCities = [];
        let menuPowers = res.menuPowers;
        for (let key in menuPowers) {
          menuPowers[key].forEach(i => {
            this.defaultChecked.push(i.menuID);
          });
          this.checkedCities = res.dataPowers;
        }
        this.treeList();
      });
    },
    //下拉框
    onLoadList() {
      let params = {
        pid: localStorage.getItem("serverName"),
        rfdwnm: localStorage.getItem("TreeRfdwnm"),
        serviceName: localStorage.getItem("serverName")
      };
      this.$axios
        .post("/role/query", params)
        .then(res => {
          res = res.data;
          if (res.result.resultCode == "000000") {
            this.options = [];
            res.roles.forEach((item, index) => {
              this.options.push({
                value: item.roleID,
                label: item.roleName
              });
            });
            this.form.js = this.options[0].value;
          }
        })
        .then(() => {
          this.selectChange(this.form.js)
        });
    },
    // 菜单权限
    muenList() {
      let params = {
        serviceName: localStorage.getItem("serverName")
      };
      this.$axios.get("/power/query/data/all", params).then(res => {
        res = res.data;
        this.cities = [];
        if (res.result.resultCode == "000000") {
          res.dataPowers.forEach(item => {
            if (item.status == 1) {
              this.cities.push({
                dataName: item.dataName,
                id: item.dataID
              });
            }
            if (this.checkAll == true) {
              this.checkedCities.push(item.dataID);
            } else {
              this.checkedCities = [];
            }
          });
        }
      });
    }
  },
  components: {}
};
</script>


<style scoped lang="less">
.h100 {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  .content {
    border: 1px solid rgba(5, 230, 230, 0.3);
    border-top: 2px solid #00ffff;
    height: calc(100% - 36px);
    box-sizing: border-box;
    background-color: #1c3742;
    padding: 50px;
    .noBg {
      width: 600px;
    }
    .treeDiv {
      width: 100%;
      max-height: 450px;
    }
  }
}
</style>
